<template>
  <div class="search music-cpns-common" ref="searchRef">
    <h2 style="color: #888; fontsize: 14px">
      搜索
      <span style="color: #5292fe">"{{ keywords }}"</span>找到
      <span style="color: #333">{{ totals }}</span
      >首单曲
    </h2>
    <page-music-table
      :contentTableConfig="contentTableConfig"
      :dataList="songs"
      :lookShow="false"
      :headerBtnShow="false"
      @hanelDbPlay="hanelDbPlay"
      @handelPage="handelPage"
    >
      <template #doing="scope">
        <a href="#" @click.prevent.stop="addCollect(scope.row.id)">
          <el-icon v-show="true" class="table-icon" color="#000"
            ><star
          /></el-icon>
          <el-icon v-show="false" class="table-icon" color="#000"
            ><star-filled
          /></el-icon>
        </a>
        <a href="#" @click.prevent.stop="startDown(scope.row)">
          <el-icon class="table-icon" color="#000"><download /></el-icon>
        </a>
      </template>
    </page-music-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { getSearchSings } from '@/service/search'
import { contentTableConfig } from '../config/table-config'
import PageMusicTable from '@/components/page-find-music/page-news-music/page-music-table'
const route = useRoute()
const store = useStore()
const keywords = String(route.params.key)
const totals = ref(99)
const songs = ref([])
const getSings = (key: string, limit: number, offset: number, type: number) => {
  getSearchSings(key, limit, offset, type).then((res: any) => {
    contentTableConfig.dataCount = res.result.songCount
    totals.value = res.result.songCount
    songs.value = res.result.songs
  })
}
getSings(keywords, 30, 0, 1)
// 接收到点击了该歌单里的音乐开始播放
const musicIdList: any = ref([])
const hanelDbPlay = () => {
  store.commit('music/updateMusicList', musicIdList.value)
}
// 切换了标签页
const handelPage = (pages: any) => {
  handleTop()
  contentTableConfig.page = pages
  getSings(
    keywords,
    pages.pageSize,
    (pages.currentPage - 1) * pages.pageSize,
    1
  )
}
const searchRef = ref<HTMLElement>()
const handleTop = () => {
  searchRef.value!.scrollTop = 0
}
// 收藏
const addCollect = (id: number) => {
  store.dispatch('down/pullLike', { id })
}
// 下载
const startDown = (item: any) => {
  store.dispatch('down/downMusic', item)
}
</script>

<style scoped lang="less">
.search {
  padding: 10px 30px;
  width: 98%;
}
</style>
